<template>
    <scDialog :title="titleMap" v-model="dialogVisible" :width="1200">
        <el-container :style="`height: ${height}px;border: 1px solid #e6e6e6;`">
            <el-container class="is-vertical">
                <div class="panel-search-box">
                    <div class="panel-search">
                        <el-input v-model="search.name" style="width: 150px;" placeholder="企业名称" clearable></el-input>
                        <el-input v-model="search.mobile" style="width: 150px;" placeholder="注册手机号" clearable></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    </div>
                </div>
                <el-main class="nopadding">
                    <scTable ref="table_member_all" @dataChange="changedData" :apiObj="apiObj" @select="selectionChange" @select-all="selectionAll">
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column label="企业名称" prop="name"></el-table-column>
                        <el-table-column label="注册手机号" prop="mobile" width="150"></el-table-column>
                        <el-table-column label="状态" prop="roles" width="100">
                            <template #default="scope">
                                <el-tag size="mini" :type="scope.row.status.val==1 ? '' : 'info'">{{scope.row.status.name}}</el-tag>
                            </template>
                        </el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </el-container>
		<template #footer>
			<el-button @click="close" >关 闭</el-button>
            <el-button type="primary" v-if="selected.length>0" @click="openSelection">查看已选{{selected.length}}个</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submitAdd">确定</el-button>
		</template>
	</scDialog>
    <scDialog :title="`已选择企业`" v-model="selected_visible" :width="1000">
        <div style="height: 450px;">
            <el-button type="danger" style="margin-bottom: 20px;" plain icon="el-icon-delete" :disabled="selectedMembers.length==0" @click="deleteSelectedMembers">移除</el-button>
            <el-container class="is-vertical">
                <el-main class="nopadding">
                    <scTable ref="table_selected" :hidePagination="true" remoteSort :data="temporary_selected" @selection-change="selectionMembers">
                        <el-table-column type="selection" width="50"></el-table-column>
                        <el-table-column label="企业名称" prop="name"></el-table-column>
                        <el-table-column label="注册手机号" prop="mobile" width="150"></el-table-column>
                        <el-table-column label="状态" prop="roles" width="100">
                            <template #default="scope">
                                <el-tag size="mini" :type="scope.row.status.val==1 ? '' : 'info'">{{scope.row.status.name}}</el-tag>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="所属部门" prop="roles">
                            <template #default="scope">
                                <div class="deparments tc">
                                    <span v-for="(item,index) in scope.row.deparments" :key="index">{{item.name}} <span v-if="index != scope.row.deparments.length - 1">，</span> </span>
                                </div>
                            </template>
                        </el-table-column> -->
                        <!-- <el-table-column label="职位" prop="roles">
                            <template #default="scope">
                                <span>{{scope.row.post?scope.row.post.name:''}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="职级" prop="roles">
                            <template #default="scope">
                                <span>{{scope.row.postRank?scope.row.postRank.name:''}}</span>
                            </template>
                        </el-table-column> -->
                        <el-table-column label="操作" fixed="right" align="right" width="80">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="table_delete(scope.row, scope.$index)">移除</el-button>
                            </template>
                        </el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </div>
        <template #footer>
            <el-button @click="selected_visible = false">关闭</el-button>
            <el-button @click="handleChange" type="primary">确定 <span v-if="temporary_selected.length">({{temporary_selected.length}})</span> </el-button>
        </template>
    </scDialog>
</template>

<script>
import { unique } from '@/utils'
export default {
    components: {
        
    },
    props: {
        modelValue: { type: String, default: "" },
        height: { type: String, default: "500" },
        apiObj: { type: Object, default: ()=> {} }
    },
    data(){
        return {
            titleMap: '选择企业',
            dialogVisible: false,
            search: {
                name: '',
                mobile: '',
                type: '2',
                companyId: ''
            },
            selected: [],
            //已选择用户弹框
            selected_visible: false,
            //已选择的已选择成员列表
            selectedMembers: [],
            //临时de已选择的成员列表(用于确认的时候判断是否与“已选择的成员列表”相同，不同则代表有删除)
            temporary_selected: []
        }
    },
    watch:{
        modelValue(){
            this.dialogVisible = this.modelValue
        },
        dialogVisible(news){
            if(!news) {
                this.$emit('update:modelValue', false)
            }
        }
    },
    mounted() {
    },
    methods: {
        // 搜索
        upsearch(){
            this.$refs.table_member_all.upData(this.search)
        },
        //设置已选择的
        setData(arr){
            if (arr && arr.length) this.selected = arr
            this.$refs.table_member_all.refresh()
        },
        //数据变化
        changedData(res, tableData) {
            if (this.selected && this.selected.length) {
                this.selected.forEach(item => {
                    tableData.forEach(itm => {
                        if (item.id === itm.id) {
                            this.$refs.table_member_all.toggleRowSelection(itm, true)
                        }
                    })
                })
            }
        },
        //确定是否修改已选择成员
        handleChange() {
            if (this.temporary_selected.length != this.selected.length) {
                this.selected = this.temporary_selected
                this.selected_visible = false
                this.$refs.table_member_all.reload();
            } else {
                this.selected_visible = false
            }
        },
        //移除已选择的成员（多选）
        deleteSelectedMembers() {
            if (this.temporary_selected.length === this.selectedMembers.length) {
                this.temporary_selected = []
                this.selectedMembers = []
            } else {
                this.temporary_selected = this.temporary_selected.filter((item) => {
                    let haveIndex = this.selectedMembers.findIndex(itm => { return itm.id === item.id })
                    if (haveIndex == -1) {
                        return item
                    }
                })
                this.selectedMembers = []
            }
        },
        //移除已选择的成员
        table_delete(row, index) {
            this.temporary_selected.splice(index, 1)
        },
        //打开已选择的成员列表查看
        openSelection() {
            this.temporary_selected = JSON.parse(JSON.stringify(this.selected))
            this.selected_visible = true
        },
        //选择已选择的成员
        selectionMembers(e) {
            this.selectedMembers = e
        },
        async submitAdd() {
            let members = this.selected
            this.$refs.table_member_all.clearSelection()
            this.selected = []
            this.visible = false
            this.$emit('submit', members)
        },
        close(){
            this.selected = []
            this.$refs.table_member_all.clearSelection()
            this.$emit('update:modelValue', false)
        },
        selectionChange(e, row){
            let index = this.selected.findIndex(item => { return row.id == item.id })
            if (index != -1) {
                this.selected.splice(index, 1)
            } else {
                this.selected.push(row)
            }
        },
        selectionAll(e){
            if (e.length) {
                this.selected = unique(this.selected.concat(e))
            } else {
                let nowDataIds = this.$refs.table_member_all.tableData
                nowDataIds.forEach(item => {
                    this.selected.forEach((itm, idx) => {
                        if (item.id === itm.id) {
                            this.selected.splice(idx, 1)
                        }
                    })
                })
            }
        }
    },
}
</script>